<template>
	<div className="login">
		<div className="container">
			<div className="left"></div>
			<div className="right">
				<div className="right-logo"></div>
				<div className="right-title">AI工具</div>
				<div className="right-form">
					<div class="form">
						<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
							class="demo-ruleForm" :size="formSize" status-icon>
							<el-form-item label="账号" prop="name">
								<el-input v-model="ruleForm.name" />
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="ruleForm.password" />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm(ruleFormRef)">
									登录
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { login } from '@/api/common'
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { getItem, setItem } from '@/utils/storage'
import useStore from '@/store/index'
import { setToken } from '@/utils/token'

const state = useStore()

import userJSON from '@/mock/user.json'

interface RuleForm {
	name: string
	password: string
	type: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	name: 'shaoyuan',
	password: '123456',
	type: 'api',
})

const router = useRouter()
const route = useRoute()

const rules = reactive<FormRules<RuleForm>>({
	name: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
	password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
	type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
})

const submitForm = async (formEl: any) => {
	if (!formEl) return
	await formEl.validate(async (valid: any, fields: any) => {
		if (valid) {
			// const data = await login(formEl)
			const data = userJSON
			state.setUser(state, data.data)
			setToken(data.data.token)
			router.push('/')
			// 获取当前路由对象
			let redirect = route.query.redirect || '/'
			if (typeof redirect !== 'string') {
				redirect = '/'
			}
			router.replace(redirect)
		} else {
			console.log('error submit!', fields)
		}
	})
}

onMounted(() => { })
</script>

<style lang="css" scoped>
.login {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 100vh;
	padding-top: 64px;
	background: #fff url(../../assets/img/bg_login.jpg) center no-repeat;
	background-size: 100% 100%;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	box-shadow: 0px 2px 12px 0px rgba(29, 112, 245, 0.31);


}

.left {
	width: 50%;
	height: 100%;
	background: #1b48cb url(../../assets/img/bg_login_left.png) center no-repeat;
	background-size: 100% 100%;
}

.right {
	box-sizing: border-box;
	width: 50%;
	height: 100%;
	background-color: #fff;

}

.right-logo {
	background-size: 100% 100%;
}

.right-title {
	text-align: center;
	font-size: 26px;
	color: #222222;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	font-weight: 400;
}

.right-form {
	margin: 20px auto;
	width: 400px;
}

@media screen and (max-width: 1025px) {
	.container {
		width: 870px;
		height: 408px;
		border-radius: 8px;
	}

	.right-logo {
		width: 232px;
		height: 42px;
		margin: 20px auto 12px auto;
	}

	.right-title {
		margin-bottom: 24px;
	}
}

@media screen and (max-width: 1367px) and (min-width: 1025px) {
	.container {
		width: 1040px;
		height: 480px;
		border-radius: 8px;
	}

	.right-logo {
		width: 232px;
		height: 42px;
		margin: 48px auto 16px auto;
	}

	.right-title {
		margin-bottom: 36px;
	}
}

@media screen and (max-width: 99999px) and (min-width: 1367px) {
	.container {
		width: 1300px;
		height: 600px;
		border-radius: 12px;
	}

	.right-logo {
		width: 328px;
		height: 52px;
		margin: 90px auto 16px auto;
	}

	.right-title {
		margin-bottom: 50px;
	}
}
</style>
